<template>
  <div class="vote">
  <toast class="vote-toast" v-model="showToast" type="text" :time="2000" is-show-mask  width="4.8rem" position="middle">恭喜你守护成功~</toast>
  <Follow v-if="!followflag" :follow="followflag" />
  <Bind v-else-if="!bindflag" :bind="bindflag"/>
  <Loading  :class="{none:!showLoad}"/>
  <alert v-model="alert.show" :title="alert.title">{{ alert.msg}}</alert>
  <article class="no-select"><Voteleave  ref="votesNumber"/></article>
  <Voteinfo v-if="user"  :personlist='user'/> 
  <div class="pic-show"></div> 
  <header>
      <span class="lf"></span>
      <Drag v-if="imglist" :imglist="imglist" />
      <span class="rt"></span>
  </header>
   <div class="impress-divider"><divider>大家对TA的印象是</divider></div>
  <Impress v-if="user" :user="user"/>
    <!-- <p class="rank hye4gjm"><span>排名：<b>{{rank}}</b></span><span>票数：<b>{{votesNumber}}</b></span></p> -->
    <!-- <Userform v-if="user" :user="user" @changeVideo="showAlert"/> -->
    <!-- <div class=" give-impress HYShuaiXianTiW"><span class="hye4gjm">她给你的印象：</span></div> -->
  <div class="impress-divider"><divider>您对TA的印象是</divider></div>
  <div class="give-impress HYShuaiXianTiW"><span v-for="(items ,key) of newLabel" :key="key" @click.passive="chooseImpress(items.id)" class="no-active" :class="{active:items.active}">{{items.name}}</span></div>
  <p  class="btn"><span @click.passive="voteUser"></span><span @click.passive="joinGame"></span></p>
  <!-- <span @click.passive="drawPrize"></span> -->
  <!-- 中奖弹窗 -->
  <x-dialog :show.sync="showDailog" class="dialog-prize">
    <div class="img-box" :class="{xiaoming:bgtype[1],txwk:bgtype[2],vivophone:bgtype[3],didi:bgtype[4],txsp:bgtype[5],flow:bgtype[6],vivoCard50:bgtype[7],vivoCardDiscount:bgtype[8],thanks:bgtype[9],txquan:bgtype[10],tcquan:bgtype[11],}">
      <p class="prize-btn" @click.passive="toPrize"></p>
      </div>
      <div @click="showDailog=false">
      <x-icon type="ios-close" size="38" class="icon-red"></x-icon>
    </div>
  </x-dialog>
  <!-- 抽奖弹窗 -->
   <x-dialog :show.sync="showDoLottery" class="dialog-Lottery">
    <div class="img-box">
      <p class="title"></p>
      <p class="btn" @click.passive="drawPrize"></p>
    </div>
      <!-- <div @click="showDoLottery=false">
      <x-icon type="ios-close" size="38" class="icon-red"></x-icon>
    </div> -->
  </x-dialog>
  </div>
</template>
<script>


import Bind from "@/components/com/Bind";
import Voteleave from "@/components/com/Voteleave";
import Follow from "@/components/com/Follow";
import Drag from "@/components/com/Drag";
import Voteinfo from "@/components/com/Voteinfo";
import Userform from "@/components/com/Userform";
import Impress from "@/components/com/Impress";
import { Icon, XDialog, Alert, Divider, Toast } from "vux";
import Loading from "@/components/com/Loading";
import Qs from "qs";
import {
  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq
} from "@/assets/lib/tool.js";
import { wxShare } from "@/assets/lib/wxshare.js";
import { setTimeout } from 'timers';
export default {
  components: {
    Drag,
    Userform,
    Impress,
    Icon,
    XDialog,
    Alert,
    Loading,
    Bind,
    Follow,
    Voteinfo,
    Divider,
    Voteleave,
    Toast
  },
  data() {
    return {
      showDailog: false,
      showToast: false,
      bgtype: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //中奖弹窗
      alert: {
        show: false,
        title: "",
        msg: ""
      },
      labelList: [],
      auditing: true,
      queryInfoByIdUrl: "/wxjx/goddess/common/user/queryInfoById",
      judgeUrl: "/wxjx/goddess/common/user/judge",
      judgeForkUrl: "/wxjx/goddess/common/vote/judge",
      voteUrl: "/wxjx/goddess/common/vote/vote",
      impressionListUrl: "/wxjx/goddess/common/impression/impressionList",
      judgedoLotteryUrl: "/wxjx/goddess/common/prize/judge",
      doLotteryUrl: "/wxjx/goddess/common/prize/draw",
      openid: GetRequest().openid,
      voteUserId: GetRequest().userid, //女神的id
      user: {},
      type: "", //奖品类型
      rank: "",
      join: "1", // 参加
      followflag: 1, //关注
      bindflag: 1, //绑定
      bindtype: '',
      followtype: '',
      votesNumber: "", //投票号码
      showLoad: true,
      showDoLottery: false,
      imglist: [],
      // pathUrl: "http://118.212.184.170/wxjx/file/img",
      pathUrl: ""
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.impressionList();
      this.queryBind();
      this.getUserInfor();
      this.judgeForkUser();
      setTimeout(() => {
        wxShare();
      }, 500)
      // new Promise().then(result => {
      //   this.judgeForkUser();
      // });
    });
  },
  computed: {
    newLabel() {
      //console.log(this.labelList);
      return this.labelList;
    }
  },
  methods: {
    //剩余投票次数
    getLeftVote() {
      this.$http
        .get(getServerHost() + this.getLeftVoteUrl, {
          params: {
            openid: this.openid
          }
        }).then(result => {
          //console.log(result);
          result = result.data;
          if ('200' !== result.code) {
            return;
          }
          this.leavevotes = result.res.leftVots;
          //console.log('leavevote', this.leavevotes);
        })
    },
    // 跳转到奖品页面
    toPrize() {
      this.$router.push({ name: "prize", query: { openid: this.openid } });
    },
    //参加游戏，
    joinGame() {
      this.$router.push({ name: "home", query: { openid: this.openid } });
    },
    //显示没有视频
    showAlert() {
      this.alert = {
        show: true,
        title: "提示",
        msg: "当前用户没有视频"
      };
    },
    //获取标签列表
    impressionList() {
      var vm = this;
      this.$http
        .get(getServerHost() + this.impressionListUrl, {})
        .then(result => {
          result = result.data;
          if ("200" == result.code) {
            result.res.map(items => {
              items["active"] = false;
            });
            vm.labelList = result.res;
            //console.log(result.res);
          }
        });
    },
    //判断是否抽奖
    judgedoLottery() {
      var vm = this;
      this.showLoad = true;
      this.$http(getServerHost() + this.judgedoLotteryUrl, {
        params: {
          openid: this.openid
        }
      }).then(result => {
        vm.showLoad = false;
        result = result.data;
        //console.log(result.res.hasDraw);
        if (0 == result.res.hasDraw) {
          //console.log('this.bindtype', this.followtype, this.bindtype);
          this.showToast = true;
          if (!Boolean(this.followtype)) {
            setTimeout(() => {
              this.followflag = this.followtype; //关注
            }, 2000)
            return;
          }
          if (!Boolean(this.bindtype)) {
            setTimeout(() => {
              this.bindflag = this.bindtype; //关注
            }, 2000)
            return;
          }
          vm.showDoLottery = true;
        } else {
          this.showToast = true;
        }
      });
    },
    //抽奖
    drawPrize() {
      this.$http(getServerHost() + this.doLotteryUrl, {
        params: {
          openid: this.openid,
          voteUserId: this.voteUserId
        }
      }).then(result => {
        result = result.data;
        this.showDoLottery = false;
        if ("200" == result.code) {
          this.showDailog = true;
          this.type = result.res.type;
          this.bgtype = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          this.$set(this.bgtype, result.res.type, 1);
          // xiaoming:bgtype[0],txwk:bgtype[1],vivophone:bgtype[2],didi:bgtype[3],txsp:bgtype[4],flow:bgtype[5],vivoCard50:bgtype[6],vivoCardDiscount:bgtype[7],thanks:bgtype[8]
        } else if ("999" == result.code) {

        }
      });
    },
    //查询用户是否关注是否绑定
    queryBind() {
      var vm = this;
      this.$http
        .get(getServerHost() + this.judgeUrl, {
          params: {
            openid: vm.openid
          }
        })
        .then(rs => {
          rs = rs.data;
          //是否参加活动
          if ("200" == rs.code) {
            vm.join = '1' == rs.res.join ? 1 : 0;
            //是否绑定
            vm.bindtype = '1' == rs.res.bind ? 1 : 0;
            //是否关注
            vm.followtype = '1' == rs.res.subscribe ? 1 : 0;
          }
        });
    },
    //判断是否投票过
    judgeForkUser() {
      var vm = this;
      this.$http
        .get(getServerHost() + this.judgeForkUrl, {
          params: {
            openid: this.openid,
            voteUserId: this.voteUserId
          }
        })
        .then(result => {
          //console.log(result);
          result = result.data;
          if ("200" != result.code) {
            vm.showLoad = false;
          } else {
            vm.showLoad = false;
            vm.hasVote = result.res.hasVote;
            //console.log('vm.hasVote', vm.hasVote);

          }
        });
    },
    //选择印象标签
    chooseImpress(type) {
      var vm = this;
      //console.log(type);
      this.labelList.map(items => {
        if (items.id == type) {
          vm.impressionId = type;
          items.active = true;
          //console.log(items.active);
        } else {
          items.active = false;
        }
      });
    },
    //投票
    voteUser() {
      var vm = this;
      this.showLoad = true;
      if ('1' == vm.hasVote) {
        this.showLoad = false;
        vm.alert = {
          show: true,
          title: "提示",
          msg: '你今天已经守护过TA了！'
        };
        return;
      }
      this.$http
        .get(getServerHost() + this.voteUrl, {
          params: {
            impressionId: this.impressionId,
            openid: this.openid,
            voteUserId: this.voteUserId
          }
        })
        .then(result => {
          this.showLoad = false;
          result = result.data;
          if ("200" == result.code) {
            //调用子组件的获取剩余次数的方法
            this.$refs.votesNumber.getLeftVote();
            //更新页面
            vm.getUserInfor();
            //判断是否抽奖
            vm.judgedoLottery();
          } else {
            vm.alert = {
              show: true,
              title: "提示",
              msg: result.msg
            };
          }
        });
    },
    //获取用户信息
    getUserInfor(resolve, reject) {
      var vm = this;
      this.$http
        .get(getServerHost() + this.queryInfoByIdUrl, {
          params: {
            id: vm.voteUserId
          }
        })
        .then(rs => {
          //console.log(rs);
          rs = rs.data;
          if ("200" == rs.code) {
            this.user = rs.res;
            vm.rank = rs.res.rank;
            vm.votesNumber = rs.res.votesNumber;
            if (rs.res.image1Path) {
              vm.imglist.unshift(vm.pathUrl + rs.res.image1Path);
            }
            if (rs.res.image2Path) {
              vm.imglist.unshift(vm.pathUrl + rs.res.image2Path);
            }
            if (rs.res.image3Path) {
              vm.imglist.unshift(vm.pathUrl + rs.res.image3Path);
            }
            if (rs.res.image4Path) {
              vm.imglist.unshift(vm.pathUrl + rs.res.image4Path);
            }
          } else {

          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  background: transparent;
}
.pic-show {
  margin: 0 auto;
  width: 130px;
  height: 58px;
  background: url("../../assets/img/pic-show.png") no-repeat;
  background-size: 100% 100%;
}
article {
  position: relative;
  margin: 0 auto;
  width: 640px;
  height: 316px;
  background: url("../../assets/img/title.png") no-repeat;
  background-size: 100% 100%;
  span {
    position: absolute;
    right: 24px;
    bottom: 12px;
    font-size: 36px;
    font-weight: bold;
    color: #f5f296;
  }
}
.dialog-Lottery .img-box {
  width: 6.4rem;
  height: 7.01rem;
  background: url("../../assets/img/video-panel.png") no-repeat;
  background-size: 6.4rem 7.01rem;
}
.impress-divider {
  padding: 0 35px;
}
.prize-btn {
  align-self: center;
  width: 320px;
  height: 110px;
  // background: #fff;
  margin: 100px auto 0;
}
.img-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.xiaoming {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/xiaoming.png") no-repeat;
  background-size: 596px 424px;
}
.txwk {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/txwk.png") no-repeat;
  background-size: 596px 424px;
}
.vivophone {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/vivo-phone.png") no-repeat;
  background-size: 596px 424px;
}
.didi {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/didi.png") no-repeat;
  background-size: 596px 424px;
}
.txsp {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/txsp.png") no-repeat;
  background-size: 596px 424px;
}
.flow {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/flow.png") no-repeat;
  background-size: 596px 424px;
}
.vivoCard50 {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/vivocard50.png") no-repeat;
  background-size: 596px 424px;
}
.vivoCardDiscount {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/vivo-discount.png") no-repeat;
  background-size: 596px 424px;
}
.thanks {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/thanks.png") no-repeat;
  background-size: 596px 424px;
}
.tcquan {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/tc-quan.png") no-repeat;
  background-size: 596px 424px;
}
.txquan {
  width: 596px;
  height: 424px;
  background: url("../../assets/img/tx-quan.png") no-repeat;
  background-size: 596px 424px;
}
.vote {
  width: 100%;
  min-height: 100%;
  background: #ffe6ec;
  // background: url("../../assets/img/user-bg.png") no-repeat;
  // background-size: 100% 100%;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .lf {
      position: relative;
      left: 80px;
      width: 39px;
      height: 58px;
      background: url("../../assets/img/lf-icon.png") no-repeat;
      background-size: 100% 100%;
    }
    .rt {
      position: relative;
      right: 80px;
      width: 39px;
      height: 58px;
      background: url("../../assets/img/rt-icon.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .rank {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    color: #ce1010;
    font-weight: bold;
  }
  .give-impress {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 30px;
    span {
      margin: 10px;
      color: #ffffff;
    }
    span:first-child {
      font-size: 22px;
    }
    .no-active {
      width: 130px;
      height: 50px;
      line-height: 50px;
      background: #ffbc0f;
      border-radius: 10px;
    }
    .active {
      width: 130px;
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
      background: #d83d64;
    }
  }
  .btn {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // span:nth-child(1) {
    //   width: 214px;
    //   height: 134px;
    //   background: url("../../assets/img/vote-btns.png") no-repeat;
    //   background-size: 595px 134px;
    // }
    span:nth-child(1) {
      width: 268px;
      height: 144px;
      background: url("../../assets/img/protect.png") no-repeat;
      background-size: 268px 144px;
    }
    span:nth-child(2) {
      margin: 20px 0;
      width: 268px;
      height: 63px;
      background: url("../../assets/img/reback-home.png") no-repeat 10px 0;
      background-size: 234px 63px;
    }
  }
}
.dialog-Lottery .img-box {
  .title {
    margin: 224px auto 45px;
    width: 430px;
    height: 206px;
    background: url("../../assets/img/lottery-title.png") no-repeat;
    background-size: 100% 100%;
  }
  .btn {
    margin: 0 auto;
    width: 234px;
    height: 64px;
    background: url("../../assets/img/lottery-btn.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>
